<template>
  <div class="city">
    <div class="top">
      <!-- 1.搜索框 -->
      <van-search
        v-model="searchVal"
        show-action
        shape="round"
        placeholder="城市/区域/位置"
        @cancel="onCancel"
      />

      <!-- navBar -->
      <van-tabs v-model:active="tabActive" color="#d81e06">
        <van-tab
          v-for="(value, key, index) in citiesData"
          :key="index"
          :title="value.title"
          :name="key"
        ></van-tab>
      </van-tabs>
    </div>

    <div class="content">
      <template v-for="(item, key, index) in citiesData" :key="index">
        <cityGroup v-show="tabActive === key" :city-data="item" />
      </template>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { computed, ref } from "vue";
import useCityStore from "../../stores/modules/city";
import { storeToRefs } from "pinia";
import cityGroup from "./cnps/city-group.vue";

const router = useRouter();
const searchVal = ref("");
const tabActive = ref();

const cityStore = useCityStore();
//获取数据请求
cityStore.fetchCityData();
const { citiesData } = storeToRefs(cityStore);

// const currentGroup = computed(() => {
//   return citiesData.value[tabActive.value];
// });

const onCancel = () => {
  router.back();
};
</script>

<style lang="less" scoped>
.top {
  position: relative;
  z-index: 99;
}
.content {
  height: calc(100vh - 98px);
  overflow-y: auto;
}
</style>
